<#include "layout/layout.ftl">
<#macro overrideHead>
<title>Programmer Life</title>
</#macro>
<#macro overrideContainer>
<!-- Page Content -->
<div class="container" style="background-color: #fff;padding-top:20px;">

    <div class="row">

        <!-- Blog Entries Column -->
        <div class="col-md-8">
            <#if (page.data?size > 0)>
                <#list page.data as blog>
                    <div class="blog-one">
                        <h2>
                            <a href="javascript:;" class="blog-title" style="display: none">${blog.title!''}</a>
                        </h2>
                        <h2>
                            <a href="/blog/${blog.id}" class="blog-title-new">${blog.title!''}</a>
                        </h2>
                        <p>
                            <span><i class="fa fa-eye" aria-hidden="true"></i> ${(blog.blogStatistics.viewCount)!0}</span> .
                            <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> ${(blog.blogStatistics.likeCount)!0}</span> .
                            <span><i class="fa fa-comments-o" aria-hidden="true"></i> ${(blog.blogStatistics.commentCount)!0}</span> .
                            <span class="glyphicon glyphicon-time"></span> Posted on ${(blog.createTime?string("yyyy-MM-dd"))!''}
                        </p>
                        <hr>
                        <div class="blog-subject well">
                            <p>${blog.subject!''}</p>
                        </div>
                        <div class="blog-content well" style="display: none;overflow-x: hidden;">
                        ${blog.content!''}
                        </div>
                        <hr>
                    </div>
                </#list>
            <#else>
                <h2>
                    该分类没有博客
                </h2>
            </#if>

            <nav>
                <ul class="pager">
                    <#if page.pageNo &gt; 1>
                        <li class="previous" id="preBtn"><a href="javascript:;"><span aria-hidden="true">&larr;</span> Previous</a></li>
                    </#if>
                    <#if page.pageNo &lt; page.pageMax>
                        <li class="next" id="nextBtn"><a href="javascript:;">Next <span aria-hidden="true">&rarr;</span></a></li>
                    </#if>
                </ul>
            </nav>
            <form id="editForm" method="post" action="/">
                <input type="hidden" name="pageNo" id="pageNo" value="${page.pageNo}">
                <input type="hidden" id="pageMax" value="${page.pageMax}">
            </form>

        </div>

        <!-- Blog Sidebar Widgets Column -->
        <div class="col-md-4">

            <!-- Blog Search Well -->
            <div class="well">
                <h4>Blog Search</h4>
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
                <!-- /.input-group -->
            </div>

            <!-- Blog Categories Well -->
            <div class="well">
                <h4>Blog Categories</h4>
                <div class="row">
                    <div class="col-lg-12">
                        <ul class="list-unstyled">
                        <li><a href="/category/0">Default</a>
                            <#list categories as category>
                            <li><a href="/category/${category.id}">${category.name}</a>
                            </#list>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Side Widget Well -->
            <div class="well">
                <h4>Side Widget Well</h4>
                <p>Welcome To My Blog</p>
            </div>

        </div>

    </div>
    <!-- /.row -->
    <hr>

    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; <a href="http://blog.taoluoluo.win">blog.taoluoluo.win</a> 2016</p>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
    </footer>

</div>
</#macro>
<#macro overrideScript>
<script>
    $(function(){
        $(".blog-title").on("click",function (e) {
            e.stopPropagation();
            $(this).parent().siblings(".blog-subject").hide();
            $(this).parent().siblings(".blog-content").show();

        })
        $(".blog-content").on("click",function (e) {
            e.stopPropagation();
        })
        var pageNo = parseInt($("#pageNo").val());
        var pageMax = parseInt($("#pageMax").val());
        $("#preBtn").on("click",function (e) {
            e.stopPropagation();
            if(!$(this).hasClass("disabled")){
                $("#pageNo").val(pageNo-1);
                $("#editForm").submit();
            }
        })
        $("#nextBtn").on("click",function (e) {
            e.stopPropagation();
            if(!$(this).hasClass("disabled")){
                $("#pageNo").val(pageNo+1);
                $("#editForm").submit();
            }
        })
        $(document).on("click",function(e){
            var target = e.target;
            var className = target.className;
            if(className!="blog-content"&&className!="blog-title"){
                $(".blog-subject").show();
                $(".blog-content").hide();
            }
        })
    })
</script>
</#macro>
<@layout head=overrideHead container=overrideContainer script=overrideScript>
</@layout>